
<template>
  <view class="root">
    <view
      v-for="(item, index) in community"
      :key="index"
      @click="to(index)"
      class="section fd-row bgc-fff mb-24 ml-30 mr-30"
    >
      <image class="img-community" :src="item.avatar" mode="aspectFit" />
      <view class="subject f1 ml-20 jc-sa">
        <text class="title fs-28 color-333 fw-700">{{ item.name }}</text>
        <view class="fd-row fw-500">
          <view class="mr-10 fs-22 fd-row ai-baseline">
            <text class="color-8f9aa8">订阅</text>
            <text class="color-333 ml-6 mr-6">{{ item.rssNum }}</text>
            <text class="color-8f9aa8">人</text>
          </view>
          <view class="ml-10 fs-24 fd-row ai-baseline">
            <text class="color-8f9aa8">浏览</text>
            <text class="color-333 ml-6 mr-6">{{ item.scanNum }}</text>
            <text class="color-8f9aa8">次</text>
          </view>
        </view>
        <text v-if="!item.status" :class="['color-ff5500', 'fs-24']">
          审核中
        </text>
      </view>
      <image
        @click.stop="showOption(index)"
        class="width-10 height-50"
        :style="{ padding: `12rpx 24rpx` }"
        src="/static/imgs/icon-moreOption.png"
        mode="aspectFill"
      />
    </view>
    <label v-if="tips.isShow" class="ai-center jc-center">
      <image
        v-if="tips.showIcon"
        class="width-46 height-46"
        src="/static/imgs/icon-loading.gif"
        mode="aspectFill"
      />
      <text class="color-666 fs-28 ml-18">{{ tips.text }}</text>
    </label>
    <text
      v-if="!community.length && !tips.isShow"
      class="color-666 fs-28 ml-18 text-center mt-30"
    >
      您还没有创建过社群
    </text>
  </view>
</template>

<script>
  export default {
    data: () => ({
      community: [],
      tips: {
        isShow: true,
        showIcon: true,
        text: "加载中...",
      },
    }),
    onShow() {
      this.tips = {
        isShow: true,
        showIcon: true,
        text: "加载中...",
      };

      uni.fetch("/api/group/mine", {
        success: (res) => {
          this.community = res;
          this.tips.showIcon = false;
          this.tips.text = "暂无更多内容";
        },
      });
    },
    methods: {
      to(index) {
        const { bid, status } = this.community[index];
        if (!status) {
          uni.showToast({ title: "社群资料正在审核中", icon: "none" });
          return;
        }
        uni.navigateTo({ url: `postBar?id=${bid}` });
      },
      async showOption(index) {
        let [fail, success] = await uni.showActionSheet({
          itemList: ["修改", "删除"],
          itemColor: "#4371ff",
        });
        if (fail) return;

        const { bid } = this.community[index];
        if (success.tapIndex) {
          uni.showModal({
            confirmColor: "#ff5500",
            content: "确定要删除吗？",
            title: "警告",
            success: ({ confirm }) => {
              confirm &&
                uni.fetch("/api/group/del", {
                  method: "GET",
                  data: { bid },
                  success: (res) => {
                    uni.showToast({ title: "已删除" });
                    this.community.splice(index, 1);
                  },
                });
            },
          });
          return;
        }
        uni.navigateTo({
          url: `/pages/editGroup?group_id=${bid}`,
        });
      },
    },
  };
</script>

<style scoped>
  .root {
    padding: 30rpx 0 50px;
  }

  .section {
    box-shadow: 0 5rpx 20rpx 0 rgba(151, 166, 192, 0.22);
    border-radius: 10rpx;
    padding: 15rpx;
  }

  .img-community {
    width: 130rpx;
    height: 130rpx;
  }

  .mark {
    width: 44rpx;
    height: 44rpx;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 500;
    font-size: 24rpx;
    background: #fc5260;
    box-shadow: 0 3rpx 8rpx 0 rgba(252, 82, 96, 0.22);
    border-radius: 50%;
  }

  .subscription {
    padding: 6rpx 22rpx;
    background: linear-gradient(90deg, #8ec5fc, #4388e7);
    border-radius: 25rpx;
  }
</style>